<script setup lang="ts">
// import { ElemeFilled, Fold, Refresh, FullScreen, ArrowDown } from '@element-plus/icons-vue'
import { useUserStore } from '@/stores'
import { useFullscreen } from '@vueuse/core'
import { useRePassword, useLogout } from '@/composables/userManager'
import { isCollapse } from './collapse'

const { handleLogout } = useLogout()

const { form, rules, formRef, formDrawerRef, onSubmit, openRePasswordForm } = useRePassword()
const { toggle } = useFullscreen()
const userStore = useUserStore()

const handleCommand = (command: string) => {
  switch (command) {
    case 'logout':
      handleLogout()
      break
    case 'fullscreen':
      toggle()
      break
    case 'rePassword':
      // (formDrawerRef.value as any).showDrawer()
      openRePasswordForm()
      break
    default:
      console.log(command)
      break
  }
}
// 刷新
const handleRefresh = () => {
  location.reload()
}
</script>

<template>
  <div class="header">
    <span class="logo">
      <el-icon class="logo-icon">
        <ElemeFilled />
      </el-icon>
      帝莎编程
    </span>
    <el-icon class="icon-btn" @click="isCollapse = !isCollapse">
      <Fold v-if="!isCollapse" />
      <Expand v-else />
    </el-icon>
    <el-icon class="icon-btn" @click="handleRefresh">
      <Refresh />
    </el-icon>
    <div class="right">
      <el-icon class="icon-btn" @click="handleCommand('fullscreen')">
        <FullScreen />
      </el-icon>
      <el-dropdown class="dropdown">
        <span class="el-dropdown-link">
          <el-avatar :size="25" :src="userStore.userInfo?.avatar || ''" />
          {{ userStore.userInfo?.username || '未登录' }}
          <el-icon class="el-icon--right">
            <ArrowDown />
          </el-icon>
        </span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item @click="handleCommand('rePassword')">修改密码</el-dropdown-item>
            <el-dropdown-item @click="handleCommand('logout')">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
  </div>

  <FormDrawer ref="formDrawerRef" title="修改密码" destroyOnClose @submit="onSubmit">
    <el-form ref="formRef" :model="form" :rules="rules" label-width="120px" @submit.native.prevent="onSubmit">
      <el-form-item label="旧密码" prop="oldpassword">
        <el-input v-model="form.oldpassword" type="password" placeholder="请输入旧密码" />
      </el-form-item>
      <el-form-item label="新密码" prop="password">
        <el-input v-model="form.password" type="password" placeholder="请输入新密码" />
      </el-form-item>
      <el-form-item label="确认密码" prop="repassword">
        <el-input v-model="form.repassword" type="password" placeholder="请输入确认密码" />
      </el-form-item>
    </el-form>
  </FormDrawer>
</template>

<style lang="scss" scoped>
.header {
  height: 64px;
  width: 100%;
  background: #4338ca;
  color: #fff;
  display: flex;
  align-items: center;

  .logo {
    width: 250px;
    display: flex;
    font-size: 20px;
    font-weight: 100;

    align-items: center;
    justify-content: center;

    .logo-icon {
      font-size: 24px;
      margin-right: 10px;
    }
  }

  .icon-btn {
    width: 42px;
    height: 64px;
    margin: 0 10px;
    cursor: pointer;
  }

  .icon-btn:hover {
    background: rgba(255, 255, 255, 0.1);
  }

  .right {
    margin-left: auto;
    display: flex;
    align-items: center;

    .dropdown {
      width: 120px;
      cursor: pointer;

      .el-dropdown-link {
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;

        .el-avatar {
          margin-right: 8px;
        }
      }
    }
  }
}
</style>
